{% extends 'base.html' %}
{% load static %}

{% block mycss %}
    <link rel="stylesheet" href="{% static 'css/font.css' %}">
    <link rel="stylesheet" href="{% static 'css/xadmin.css' %}">
        <link rel="stylesheet" href="{% static 'css/common.css' %}">

    <!-- <link rel="stylesheet" href="./css/theme5.css"> -->
    <script src="{% static 'js/lib/layui/layui.js' %}" charset="utf-8"></script>
    <script type="text/javascript" src="{% static 'js/xadmin.js' %}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script>
        // 是否开启刷新记忆tab功能
        // var is_remember = false;
    </script>
{% endblock %}

{% block content %}


    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form" method="post">
                <div class="layui-form-item">
                    <label for="edge_type" class="layui-form-label" style="width: 100px">
                        <span class="x-red">*</span>关系类型
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="edge_type" name="edge_type" required=""
                               lay-verify="required|edge_type"
                               autocomplete="off" class="layui-input" readonly value="{{ edge.edge_type }}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>关系类型唯一名称
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="start_node" class="layui-form-label" style="width: 100px">
                        <span class="x-red">*</span>起始节点
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="start_node" name="start_node" required=""
                               lay-verify="start_node"
                               autocomplete="off" class="layui-input" readonly value="{{ edge.start_node }}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>关系中起始点
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="end_node" class="layui-form-label" style="width: 100px">
                        <span class="x-red">*</span>结束节点
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="end_node" name="end_node" required=""
                               lay-verify="end_node"
                               autocomplete="off" class="layui-input" readonly value="{{ edge.end_node }}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>关系中结束节点
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="attribute" class="layui-form-label" style="width: 100px">
                        <span class="x-red">*</span>关系属性
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="attribute" name="attribute" required=""
                               lay-verify="attribute"
                               autocomplete="off" class="layui-input" value="{{ edge.attribute }}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>关系属性输入以字典形式输入，例：key1:value;key2:value2。
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn" lay-filter="add" lay-submit="add">
                        保存
                    </button>
                </div>
            </form>
        </div>
    </div>



        <div class="layui-container" style="margin-top: 30px">
        <form>
            <div class="layui-row">
                <div style="margin: 10px 0 20px;">
                    <div style="margin-top: 10px;margin-bottom: 10px;">
                        <label style="font-weight: bold;color: #333333">关系类型</label>
                    </div>
                    <input placeholder="关系类型唯一名称" id="edge_type" name="edge_type" required=""
                           lay-verify="required|edge_type" type="text" class="layui-input my-input"
                     readonly value="{{ edge.edge_type }}">
                </div>
                <div style="margin: 10px 0 20px;">
                    <div style="margin-top: 10px;margin-bottom: 10px;">
                        <label style="font-weight: bold;color: #333333">起始节点</label>
                    </div>
                    <input placeholder="关系中起始点" type="text" id="start_node" name="start_node" required=""
                           lay-verify="start_node" class="layui-input my-input"
                     readonly value="{{ edge.start_node }}">
                </div>
                <div style="margin: 10px 0 20px;">
                    <div style="margin-top: 10px;margin-bottom: 10px;">
                        <label style="font-weight: bold;color: #333333">结束节点</label>
                    </div>
                    <input placeholder="关系中结束节点" type="text" id="end_node" name="end_node" required=""
                               lay-verify="end_node"
                           lay-verify="end_node" class="layui-input my-input"
                     readonly value="{{ edge.end_node }}">
                </div>
                <div style="margin: 10px 0 20px;">
                    <div style="margin-top: 10px;margin-bottom: 10px;">
                        <label style="font-weight: bold;color: #333333">关系属性</label>
                    </div>
                    <input placeholder="关系属性输入以字典形式输入，例：key1:value;key2:value2。"
                           type="text"  id="attribute" name="attribute" required=""
                               lay-verify="attribute"class="layui-input my-input"
                     value="{{ edge.attribute }}">
                </div>
            </div>

            <div>
                <button lay-filter="add" lay-submit="add" class="my-btn" style="float: right;" id="sub"> 确认</button>
            </div>
        </form>
    </div>
{% endblock %}
{% block myjs %}
    <script>layui.use(['form', 'layer'],
        function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;

            //自定义验证规则
            form.verify({
                edge_type: function (value) {
                    if (value.length < 1) {
                        return '关系类型不能为空';
                    }
                },
                start_node: function (value) {
                    if (value.length < 1) {
                        return '起始节点不能为空';
                    }
                },
                end_node: function (value) {
                    if (value.length < 1) {
                        return '起始节点不能为空';
                    }
                },
            });

            //监听提交
            form.on('submit(add)',
                function (data) {

                    $.getJSON('{% url 'edge_edit_submit' %}', {
                            edge_type: data.field.edge_type,
                            start_node: data.field.start_node,
                            end_node: data.field.end_node,
                            attribute: data.field.attribute,
                        }, function (data) {
                            if (data.status === 1) {
                                layer.alert("修改成功", {
                                        icon: 6
                                    },
                                    function () {
                                        //关闭当前frame
                                        xadmin.close();
                                    });
                            } else if (data.status === 2) {
                                layer.alert('本体名已存在')
                            } else if (data.status === 10) {
                                layer.alert(data.msg)
                            } else {
                                layer.alert('修改失败')
                            }
                        }
                    );


                    return false;
                });

        });</script>

{% endblock %}

